/*
 * Copyright (c) 2025 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import { Image, StyleSheet, TouchableOpacity, View } from 'react-native';
import { NavigationProp } from '@react-navigation/native';
import { useAvoidArea } from './AvoidAreaContext';

type RootStackParams = {
  Home: undefined,
  Details: undefined;
};

interface Props {
  navigation: NavigationProp<RootStackParams, 'Home'>;
}

const HomePage: React.FC<Props> = ({ navigation }: Props) => {
  //跳转
  const gameStart = (): void => {
    navigation.navigate('Details');
  };

  const {
    topRectHeight,
    bottomRectHeight,
    orientation,
    cutoutMargin,
    isHighDevice,
    isWideCutout
  } = useAvoidArea();

  return (
    <>
      <View style={styles.bgImage}>
        <Image source={require('../asset/index_bg.png')} style={styles.bgImage}></Image>
      </View>
      <View style={[styles.container, { paddingTop: topRectHeight, paddingBottom: bottomRectHeight }]}>
        <View style={styles.top}>
          <View style={[styles.left, { marginLeft: orientation === 'leftRect' ? cutoutMargin : 0 }]}>
            <Image source={require('../asset/play.png')} style={styles.iconImage}></Image>
            {isWideCutout && <Image source={require('../asset/quite.png')} style={[styles.iconImage, { marginLeft: 8 }]}></Image>}
          </View>
          <View style={[styles.right, { marginRight: orientation === 'topRect' ? cutoutMargin : 0 }]}>
            {!isWideCutout && <Image source={require('../asset/quite.png')} style={styles.iconImage}></Image>}

            <TouchableOpacity >
              <Image source={require('../asset/trun.png')} style={[styles.iconImage, { marginLeft: 8 }]} ></Image>
            </TouchableOpacity>
            <Image source={require('../asset/setting.png')} style={[styles.iconImage, { marginLeft: 8 }]}></Image>
          </View>
        </View>
        <View style={styles.middle}>
          <View>
            <Image source={require('../asset/Logo.png')} style={styles.logoImage}></Image>
          </View>
          <View style={[styles.bottom, { marginTop: !isHighDevice ? 16 : 86 }]}>
            <Image source={require('../asset/right.png')} style={styles.rightImage}></Image>
            <TouchableOpacity onPress={gameStart} >
              <Image source={require('../asset/start.png')} style={styles.StartImage}></Image>
            </TouchableOpacity>
          </View>
        </View>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    display: 'flex',
    alignItems: 'center',
    paddingLeft: 16,
    paddingRight: 16
  },
  bgImage: {
    width: '100%',
    height: '100%',
    position: 'absolute',
    resizeMode: 'stretch'
  },
  iconImage: {
    width: 40,
    height: 40
  },
  top: {
    width: '100%',
    height: 56,
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row'
  },
  left: {
    width: 'auto',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-evenly'
  },
  right: {
    width: 'auto',
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-evenly'
  },
  middle: {
    flex: 1,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center'
  },
  bottom: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'center',
    marginBottom: 28
  },
  logoImage: {
    width: 297,
    height: 130
  },
  StartImage: {
    width: 42,
    height: 62,
    marginRight: 25
  },
  rightImage: {
    width: 9,
    height: 14,
    marginRight: 16,
    marginTop: 7
  },
});
export default HomePage;
